<template>
    <div style="width: 100%;padding: 20px;background-color: #313B53;box-sizing: border-box;">
        <el-table :data="tableData" style="background-color: #313B53;width: calc(100% - 100px);height: auto; max-height: 500px;overflow: auto;margin-left: 50px;box-sizing: border-box;"
            class="zt-table sw-table-h">
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column show-overflow-tooltip label="维护日期" sortable align="center" prop="disposeDay" />
            <el-table-column show-overflow-tooltip label="故障设备" sortable align="center" prop="deviceName"/>
            <el-table-column show-overflow-tooltip label="供应商" align="center" prop="supplier" />
            <el-table-column show-overflow-tooltip label="出厂日期" sortable align="center" prop="deliveryTime" />
            <el-table-column show-overflow-tooltip label="工作时长" sortable align="center" prop="onlineHours" />
            <el-table-column show-overflow-tooltip label="故障详情" align="center" prop="failure" />
            <el-table-column show-overflow-tooltip label="维护结果" align="center" prop="maintenance" />
            <el-table-column show-overflow-tooltip label="维护人" align="center" prop="man" />
            <el-table-column show-overflow-tooltip label="维护金额" sortable align="center" prop="cost" />
            <el-table-column show-overflow-tooltip label="当前状态" align="center" prop="status"
                :formatter="(row, column, cellValue, index) => cellValue == '1' ? '已完成' : '未完成'" />
            <el-table-column show-overflow-tooltip label="" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <img class="icon-img" src="@/assets/images/amend.png" title="编辑" @click="edit(row)" />
                    <img v-if="roles.includes('admin')" class="icon-img" title="删除" src="@/assets/images/delete-bin2.png" @click="remove(row)">
                    <img v-else class="icon-img" title="不可删除" src="@/assets/images/no-delete.png">
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="table.pageNum" :page-size="table.pageSize" :total="table.total" :background="true"
            layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 40, 50, 60]">
        </el-pagination>

        <!-- 修改 -->
        <right-dialog title="修改维护记录" :visible="open" @closeDialog="cancel">
            <template v-slot:default>
                <edit-fault v-if="open" :editObj="editObj" @close="cancel" @change="dialChange"></edit-fault>
            </template>
        </right-dialog>
    </div>
</template>

<script>
import editFault from './editFault.vue'
import RightDialog from "@/components/TZ/RightDialog"
import Api from "@/api/business/fault";
export default {
    name: 'faultTable',
    components: { editFault, RightDialog },
    computed: {
        roles() {
            return this.$store.getters['roles']
        },
    },
    props: {
        regionalNodeId: {}
    },
    watch: {
    },
    data() {
        return {
            // 是否打开弹窗
            open: false,
            // 列表数据
            tableData: [],
            // 修改的维护记录
            editObj: null,
            // 分页数据
            table: {
                total: 0,
                pageSize: 10,
                pageNum: 1
            }
        }
    },
    created() {
        this.selectList();
    },
    methods: {
        // 查询数据
        selectList() {
            Api.getFaultListss({ regionalNodeId: this.regionalNodeId, ...this.table }).then(rs => {
                this.tableData = rs.rows.map(item=>{
                    if(item.pltDevice) {
                        if(item.pltDevice.id) item.deviceId = item.pltDevice.id + "";
                        if(item.pltDevice.name) item.deviceName = item.pltDevice.name;
                    }
                    return item
                })
                this.table.total = rs.total;
            })
        },
        // 分页数量变化
        handleSizeChange(size) {
            this.table.pageNum = 1;
            this.table.pageSize = size;
            this.selectList();
        },
        // 页数变化
        handleCurrentChange(page) {
            this.table.pageNum = page;
            this.selectList();
        },
        // 打开编辑弹窗
        edit(row) {
            this.open = true;
            this.editObj = row;
        },
        // 删除
        remove(row) {
            this.$modal.confirm('确认删除维护记录？').then(() => {
                Api.deleteFault(row.maintenanceId).then(rs => {
                    this.$message.success('删除成功');
                    this.selectList();
                })
            }).catch(() => { });
        },
        // 关闭窗口
        cancel() {
            this.open = false;
        },
        // 保存成功回调
        dialChange() {
            this.open = false;
            this.selectList();
        },
    }
}
</script>

<style lang="scss" scoped>
.el-pagination {
    ::v-deep.el-input__inner {
        background-color: #1E273D;
        border: none;
    }

    ::v-deep.btn-prev {
        background-color: #1E273D;
        border: none;
    }

    ::v-deep.btn-next {
        background-color: #1E273D;
        border: none;
    }
}
.sw-table-h{
    ::v-deep th{
        background-color: #313B53 !important;
    }
    ::v-deep.el-table__row:nth-child(even){
        background-color: #313B53 !important;
    }
    ::v-deep.el-table__row:nth-child(odd){
        background-color: #575D73 !important;
    }
}
</style>